<template>
    <div class="row justify-content-center">
        <div class="col-4 rm-3">
            <step-list :steps="inProcess" :route="route">
                <div class="card-header">
                    待完成的步骤({{ inProcess.length }})：
                    <button class="btn btn-success btn-sm pull-right" @click="completeAll()" style="float:right">完成所有</button>
                </div>
            </step-list>
            <step-input :route="route" @add="sync"></step-input>
        </div>
        <div class="col-4">
            <step-list :steps="processed" :route="route">
                <div class="card-header">
                    已完成的步骤({{ processed.length }})：
                    <button class="btn btn-sm btn-danger pull-right" @click="clearCompleted()" style="float:right">清除已完成</button>
                </div>
            </step-list>
           
        </div>
</div>
</template>
<script>
import StepInput from './step-input'
import StepList from './step-list'
import { Hub } from '../event-bus'
export default {
    props:[
        'route'
    ],
    components:{
        'step-input':StepInput,
        'step-list':StepList
    },
    data(){
        return {
            steps:[
            //    {name:'',completion:false}
           ]
           
        }
        
    },
    created(){
        this.fetchSteps()
        Hub.$on('remove',this.remove)
    },
    computed:{
        inProcess(){
            return this.steps.filter((step)=>{
                return ! step.completion
            })
        },
        processed(){
            return this.steps.filter((step)=>{
                return  step.completion
            })
        }
    },
     methods:{
         fetchSteps(){
                axios.get(this.route).then((res)=>{
                this.steps=res.data.steps
                // this.steps=res.data
                // console.log(res)
            }).catch((err)=>{//错误和异常处理
                
            })
         },
         sync(step){
              this.steps.push(step)
         },
        // toggle(step){
        //     axios.patch(`${this.route}/${step.id}`,{completion:!step.completion}).then((res)=>{
        //        step.completion=!step.completion
        //     })
            
        // },
        remove(step){
            // axios.delete(`${this.route}/${step.id}`).then((res)=>{
                 let i=this.steps.indexOf(step)
                this.steps.splice(i,1)
            // })
           
        },
        // edit(step){
        //    // 删除当前step
        //    this.remove(step)
        //    //在输入框显示当前step的name
        //    this.newStep=step.name
        //    //focus当前的输入框
        //    this.$refs.newStep.focus()
        // //    Hub.$emit('edit',step)事件总线
        // },
        completeAll(){
            axios.post(`${this.route}/complete`).then((res)=>{//
                // this.inProcess.forEach((step)=>{
                // step.completion=true
                // }) 
                this.fetchSteps()
            })
            
        },
        clearCompleted(){
            axios.delete(`${this.route}/clear`).then((res)=>{//
                this.steps=this.inProcess
            })
            
        }

    }
}
</script>
<style>

</style>


